<!--
 * @Date: 2022-06-14 10:29:31
 * @Author: 陶子
 * @LastEditTime: 2022-06-14 17:34:46
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\workManagement\productionReport\SearchTag.vue
 * @pageName: 这是--(计件工资统计——筛选)--页面
-->
<template>
  <div class="search-content" :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }" v-show="showSearchTag">
    <div class="formgroup">
      <span class="title">操作人</span>
      <van-field v-model="filterForm.operator" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">报工日期</span>
      <van-field :is-link="!promiseDateRead" readonly name="picker" @click="promiseDateStartVisible = true" placeholder="请选择" v-model="promiseDateRead">
        <div slot="right-icon" v-show="!!promiseDateRead" @click.stop="clickEndClose">
          <van-icon name="clear" size="0.16rem" />
        </div>
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">商品规格</span>
      <van-field v-model="filterForm.spec" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>
    <!--承诺交期开始时间 -->
    <van-popup v-model="promiseDateStartVisible" position="bottom" :close-on-click-overlay='false'>
      <van-datetime-picker @confirm="confirmPromiseStartTime" @cancel="cancelPromiseStartTime" type="date" :max-date="maxDate" title="开始时间" v-model="pickStart"
        :formatter="formatter" />
    </van-popup>
    <!--承诺交期结束时间 -->
    <van-popup v-model="promiseDateEndVisible" position="bottom" :close-on-click-overlay='false'>
      <van-datetime-picker @confirm="confirmPromiseEndTime" cancel-button-text=" " type="date" :min-date='minData' :max-date="maxDate" title="结束时间" v-model="pickEnd"
        :formatter="formatter" />
    </van-popup>
  </div>
</template>
<script>
import moment from "moment";
export default {
  props: ["propsForSon"],

  data() {
    return {
      promiseDateStartVisible: false,
      promiseDateEndVisible: false,
      pickStart: null,
      pickEnd: null,
      maxDate: new Date(),
      filterForm: {
        operator: "",
        reportWorkTime: [],
        spec:"",
      },
      promiseDateRead: "",
      showSearchTag: false,
      minData: null,
    };
  },
  mounted() {},
  methods: {
    clickEndClose() {
      this.promiseDateRead = "";
      this.filterForm.reportWorkTime = [];
      this.$forceUpdate();
    },
    showModal(dropdownObj) {
      this.showSearchTag = true;
      this.$nextTick(() => {
        this.filterForm = JSON.parse(JSON.stringify(dropdownObj));
        if (this.filterForm.reportWorkTime.length > 0) {
          this.promiseDateRead =
            moment(this.filterForm.reportWorkTime[0]).format("YYYY-MM-DD") +
            "~" +
            moment(this.filterForm.reportWorkTime[1]).format("YYYY-MM-DD");
          this.pickStart = new Date(this.filterForm.reportWorkTime[0]);
          this.pickEnd = new Date(this.filterForm.reportWorkTime[1]);
        } else {
          this.promiseDateRead = "";
          let myDate = new Date();
          let year = myDate.getFullYear();
          let month = myDate.getMonth();
          this.pickStart = new Date(year, month, 1);
          this.pickEnd = myDate;
        }
      });
    },

    // 选择承诺交期开始时间
    confirmPromiseStartTime(date) {
      this.promiseDateStartVisible = false;
      this.promiseDateEndVisible = true;
      this.minData = this.pickStart;
      this.promiseDateRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消承诺交期开始时间
    cancelPromiseStartTime() {
      this.promiseDateStartVisible = false;
    },
    // 选择承诺交期结束时间
    confirmPromiseEndTime(date) {
      this.promiseDateRead =
        this.promiseDateRead + "~" + moment(date).format("YYYY-MM-DD");
      this.filterForm.reportWorkTime = [this.pickStart, this.pickEnd];
      this.promiseDateEndVisible = false;
    },

    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },

    cancel() {
      this.promiseDateRead = "";
      this.filterForm = {
        operator: "",
        reportWorkTime: [],
        spec: "",
      };
    },
    confirm() {
      this.showSearchTag = false;
      console.log("this.filterForm+++++++++++++", this.filterForm);
      this.$emit("getCategory", this.filterForm);
    },
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    height: calc(100vh - 1.11rem);
    padding-bottom: 0.53rem;
    overflow-y: scroll;
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    font-size: 0.16rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      color: #fff;
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      color: #191f25;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem 0.14rem;
}
</style>